<template>
  <div class="welcome-container">
    <!-- 欢迎标题 -->
    <h1>欢迎来到健康管理与产品平台</h1>
    
    <!-- 简介文本 -->
    <p class="intro-text">
      在这里，您可以管理您的健康信息，获取个性化的健康建议，购买精选的健康产品。
    </p>
    
    <!-- 健康管理与产品售卖按钮 -->
    <div class="action-buttons">
      <button @click="navigateToHealthManagement">健康管理</button>
      <button @click="navigateToProducts">查看健康产品</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "WelcomeVue",
  methods: {
    navigateToHealthManagement() {
      // 跳转到健康管理页面
      this.$router.push("/health-management");
    },
    navigateToProducts() {
      // 跳转到产品页面
      this.$router.push("/buy");
    },
  
  }
}
</script>

<style lang="less" scoped>
.welcome-container {
  text-align: center;
  margin-top: 50px;

  h1 {
    font-size: 36px;
    color: #2a9d8f;
    margin-bottom: 20px;
  }

  .intro-text {
    font-size: 18px;
    margin-bottom: 40px;
  }

  .action-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;

    button {
      padding: 10px 20px;
      font-size: 16px;
      background-color: #264653;
      color: white;
      border: none;
      cursor: pointer;
      border-radius: 5px;

      &:hover {
        background-color: #2a9d8f;
      }
    }
  }

  
}
</style>